Vue.component('todo-item', {
    props: ['item', 'index'],
    template: `
        <li class="todo__item">
            <input class="todo__item__completion" type="checkbox"
                v-model="item.ok"
            >
            <span class="todo__item__title" @click="item.ok = !item.ok">{{item.title}}</span>
            <button class="todo__item__delete"
                @click="$emit('delete-item', index)"
            >×</button>
        </li>`
});

const todo = new Vue({
    el: '#todo',
    data: {
        todoItem: '',
        todos: []
    },
    methods: {
        addTodoItem() {
            if (!this.todoItem) {
                return;
            }
            this.todos.push({
                ok: false,
                title: this.todoItem
            });
            this.todoItem = '';
        },
        deleteItem(index) {
            this.todos.splice(index, 1);
        }
    },
    watch: {
        todos:  {
            handler: function() {
                localStorage.setItem('todos', JSON.stringify(this.todos));
            },
            deep: true
        }
    },
    created() {
        this.todos = JSON.parse(localStorage.getItem('todos')) || [];
    }
});